@extends("admin.layouts.main")
<style>
    .card-body .form-group {
        width: 28%;
    }

    @media screen and (max-width: 1024px) {
        .card-body .form-group {
            width: 100% !important;
        }
        .my-div{
            width:90%;
        }
    }
    .show-item {
        top: 40px;
        width: 100%;
        z-index: 10;
        background: white;
        overflow: hidden;
        display: none;
    }

    .showMsg li {
        padding-bottom: 5px;
        cursor: pointer;
        padding: 10px 8px;
        margin: 2px 0;
    }

    .showMsg li:hover {
        background-color: #f2f2f2;
    }

    input::-webkit-input-placeholder { /* WebKit browsers */
        font-size: 13px;
    }

    input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        font-size: 13px;
    }

    input:-ms-input-placeholder { /* Internet Explorer 10+ */
        font-size: 13px;
    }
    .card{
        min-width: 1024px;
    }
</style>
<meta name="csrf-token" content="{{ csrf_token() }}">
@section("content")
<div class="container-fiuld p-3" id="app">
    <div class="card">
        <div class="card-body">
            <div class="pt-2 pb-2 d-flex justify-content-between align-items-center" style="background-color:#f2f2f2;font-size:18px;">
                <h4 class="pl-2">修改公会</h4>
                <a href="{{ route('guild.index') }}" class="btn btn-link">返回</a>
            </div>
            <form class="layui-form mt-3">
                <div class="form-group w-50 row align-items-center">
                    <label class="text-right mr-3 col-lg-3" >所属公会:</label>
                    <input type="text" class="form-control" id="uid" style="width:10%;border-radius:0;" name="gid" value="{{ $guild->gid }}" placeholder="公会ID" disabled>
                    <div class="position-relative my-div">
                        <input type="text" class="form-control" style="border-radius:0;" autocomplete="off" id="handleChange" name="username" value="{{$guild->gtitle}}" placeholder="请输入公会名称" />
                        <div class="position-absolute show-item">
                            <ul class="showMsg">
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="form-group w-50 row align-items-center">
                    <label class="col-lg-3 text-right mr-3" style="line-height:30px">登录用户名:</label>
                    <input type="text" class="form-control col-lg-4" name="username" value="{{ $guild->username }}" required lay-verify="required" placeholder="请输入用户名" />
                </div>
                <div class="form-group w-50 row align-items-center">
                    <label class="col-lg-3 text-right mr-3">登录密码:</label>
                    <input type="password" class="form-control col-lg-4" name="password" value="" id="pwd" placeholder="请输入密码" />
					<span class="col-lg-3 text-danger">密码留空不修改</span>
                </div>
				<div class="form-group w-50 row align-items-center">
                    <label class="col-lg-3 text-right mr-3" style="line-height:30px">公会老板:</label>
                    <input type="text" class="form-control col-lg-4" name="boss_name" value="{{ $guild->boss_name }}" lay-verify="required" placeholder="需要真实姓名并保持和提现账户一致" />
                </div>
                <div class="form-group w-50 row align-items-center">
                    <label class="col-lg-3 text-right mr-3" style="line-height:30px">手机:</label>
                    <input type="text" class="form-control col-lg-4" name="mobile"  value="{{ $guild->mobile }}" lay-verify="required" placeholder="请输入手机" />
                </div>
                <div class="form-group w-50 row align-items-center">
                    <label class="col-lg-3 text-right mr-3" style="line-height:30px">座机:</label>
                    <input type="text" class="form-control col-lg-4" name="tel" value="{{ $guild->tel }}" placeholder="请输入座机" />
					<span class="col-lg-3 text-danger">例：xxxx-xxxxxxxx</span>
                </div>
                <div class="form-group w-50 row align-items-center">
                    <label class="col-lg-3 text-right mr-3" style="line-height:30px">微信:</label>
                    <input type="text" class="form-control col-lg-4" name="wechat" value="{{ $guild->mobile }}" lay-verify="required" placeholder="请输入微信"/>
                </div>
                <div class="form-group w-50 row align-items-center">
                    <label class="col-lg-3 text-right mr-3" style="line-height:30px">QQ:</label>
                    <input type="text" class="form-control col-lg-4" name="qq" value="{{ $guild->wechat }}" lay-verify="required" placeholder="请输入QQ" />
                </div>
                <div class="form-group w-50 row align-items-center">
                    <label class="col-lg-3 text-right mr-3" style="line-height:30px">邮箱:</label>
                    <input type="text" class="form-control col-lg-4" name="email" value="{{ $guild->email }}" lay-verify="required" placeholder="请输入邮箱" />
                </div>
				<div class="form-group w-50 row align-items-center">
					<label class="col-lg-3 text-right mr-3" style="line-height:30px">指定客服:</label>
                    <input type="text" class="form-control col-lg-4" name="kefu" value="{{ $guild->kefu }}" lay-verify="required" placeholder="公会指定的工作对接人" />
                </div>
                <div class="form-group w-50 row align-items-center">
                    <label class="col-lg-3 text-right mr-3" style="line-height:30px">地址:</label>
                    <input type="text" class="form-control col-lg-4" name="address" value="{{ $guild->address }}" lay-verify="required" placeholder="需要可收快递、上门考察的真实联系地址" />
                </div>
				@if(in_array('guild.update', $menuRule))
                <div class="" style="margin-left:10rem">
                    <button class="layui-btn" lay-submit lay-filter="update-guild" data-url="{{ route('guild.update', ['id' => $guild->id]) }}" data-type="POST">提交</button>
                    <button type="reset" class="btn btn-danger">重置</button>
                </div>
				@endif
            </form>
        </div>
    </div>
</div>
@endsection
@section("js")
<script>
    //数据操作
    layui.use(["form", "layer"], function () {
        var form = layui.form, $ = layui.$, layer = layui.layer;
        $("body").on("click",function() {
            $(".show-item").css({"display": "none"})
            $(".showMsg").html("");
        })
        $(".showMsg").on("click","li",function(e){
            var html = $(this).html();
            if(html.indexOf("ID") != -1) {
                var id = html.split("ID")[1].trim();
            }
            $("#uid").val(id);
            $(".show-item").css({"display": "none"})
            $(".showMsg").html("");
        })
        $("#handleChange").on("input propertychange", "", function (e) {
          e.preventDefault();
          $(".show-item").css({"display": "block"})
		  $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});
          var username = $(this).val();
          if (!username) {
              $(".showMsg").html(`<li>无相关信息加载</li>`);
              return;
          }
          $.ajax({
            url: "/admin/guildsearch",
            data: {username},
            type: "POST",
            success: function (res) {
                var html = "";
                if(res.length == 0){
                    $(".showMsg").html(`<li>无相关信息加载</li>`);
                    return;
                }
                for (var i = 0; i < res.length; i++) {
                    html +=
                        `<li><i class="layui-icon layui-icon-username"></i>${res[i].username} #ID ${res[i].id}</li>`
                }
                $(".showMsg").html(html);
            },
            error: function (err) {
              $(".showMsg").html(`<li>错误</li>`);
                //console.log(err)
            }
          })
        })
        $(document).click(function(){

        })
        //获取下面表单的ID
    })
	layui.use(['form', 'ori'], function () {
            var form = layui.form,
                ori = layui.ori,
                $ = layui.$;
            ori.reset("[type=reset]");
            form.on('submit(update-guild)', function (data) {
                ori.submit($(this), data.field, function () {
                    window.location.reload();
                });
                return false;
            });
    });

</script>       
@endsection
